<script setup lang="ts">
import _ from 'lodash'
import {Location} from "@element-plus/icons-vue";
import {useRouter , useRoute} from "vue-router";
import {useStore} from "@/store";
import type {RouteRecordName} from "vue-router";

const router = useRouter()
const route = useRoute()
const store = useStore()

const permission = store.state.users.infos.permission;

const menus = _.cloneDeep(router.options.routes).filter((v)=>{

  v.children = v.children?.filter((v) => v.meta?.menu && (permission as (RouteRecordName| undefined)[]).includes(v.name))

  return v.meta?.menu && (permission as (RouteRecordName| undefined)[]).includes(v.name)
})
</script>

<template>
  <div>
     <el-menu :default-active="route.path" router>
       <el-sub-menu v-for="item in menus" :key="item.path" :index="item.path">
         <template #title>
           <el-icon>
             <component :is="item.meta?.icon"></component>
           </el-icon>
           <span>{{ item.meta?.title }}</span>
         </template>
         <el-menu-item v-for="itemChild in item.children" :key="item.path + itemChild.path"  :index="item.path + itemChild.path">
           <el-icon> <component :is="itemChild.meta?.icon"></component></el-icon>
           <span>{{ itemChild.meta?.title }}</span>
         </el-menu-item>
       </el-sub-menu>

     </el-menu>


  </div>
</template>

<style scoped lang="scss">
.el-menu{
  height: calc(100vh - 60px);
  border: none;
  padding-top:30px;
}

.el-menu-item.is-active{
  background: #e67fff;
  border-right: 3px solid #1890ff;
}
</style>